<template>
	<view class="u-rela">
		<view class="page-top">
			<!-- 自定义头部start -->
			<customHeader title="招工就业"></customHeader>
			<!-- 自定义头部end -->
			<image class="img-bg" src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/img-bg.png"
				mode="widthFix"></image>
			<div class="content-wrap" :style="{PaddingTop:customHeader.bottom+'px'}">
				<!-- 未认证 -->
				<div v-if="isCertified" class="u-flex text-1 white u-p-l-30 u-m-t-30">
					<!-- 认证 -->
					<view class="u-font-28">实名认证，获取更多资讯</view>
					<navigator url="/pages/recruit/worker/rz1" class="u-m-l-20 u-flex u-row-center rz-btn">
						<text>前往认证</text>
						<u-icon name="arrow-right" size="20" color="#ffffff"></u-icon>
					</navigator>
				</div>
				<!-- 已认证 -->
				<view class="u-flex u-p-l-30 u-p-r-30 u-m-t-30">
					<u-image
						:src="avatar_src == '' ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/my/avatar2.png' : avatar_src"
						width="90rpx" height="90rpx" shape="circle"></u-image>
					<text class="u-font-34 blod white u-m-l-20 u-flex-1">{{ nickname }}</text>
					<navigator url="/pages/recruit/company?type=worker"
						class="u-m-l-20 u-flex u-row-center company-btn">
						<image class="icon-8"
							src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-8.png"
							mode="widthFix"></image>
						<text>我的企业</text>
					</navigator>
				</view>
				<!-- 海报和tab -->
				<div class="banner-tab-wrap">
					<u-swiper class="page-bg" height="340" :list="banner"></u-swiper>
					<!-- tab切换 -->
					<u-tabs height="100" font-size="34" active-color="#000000" inactive-color="#999999" bar-width="80"
						bar-height="14"
						:bar-style="{borderRadius:'14rpx',backgroundColor:'#07C160',bottom:'20rpx',zIndex:'0'}"
						:active-item-style="{zIndex:1}" :list="list" :is-scroll="false" :current="current"
						@change="change">
					</u-tabs>
				</div>

			</div>
		</view>
		<template v-if="current==0">
			<!-- 查看企业 我的简历 -->
			<div class="u-flex u-row-between u-p-20">
				<navigator url="/pages/recruit/job/qysearch" class="title-item">
					<image class="icon-1"
						src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-1.png"
						mode="widthFix"></image>
					<div class="icon-wrap">
						<image class="icon-2"
							src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-2.png"
							mode="widthFix"></image>
					</div>
					<text class="u-font-30 blod u-m-l-40">查看企业</text>
				</navigator>
				<navigator url="/pages/recruit/job/jl" class="title-item">
					<image class="icon-1"
						src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-1.png"
						mode="widthFix"></image>
					<div class="icon-wrap">
						<image class="icon-2"
							src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-3.png"
							mode="widthFix"></image>
					</div>
					<text class="u-font-30 blod u-m-l-40">我的简历</text>
				</navigator>
			</div>
			<!-- 推荐 附近... -->
			<div class="action-wrap u-flex">
				<text v-for="(item,index) in actionList" :key="index" :class="['text-1',{active:actionIndex==index}]"
					@click="handleAction(index)">
					{{item.name}}
				</text>
				<view class="u-flex-1"></view>
				<div class="u-flex u-row-right" @click="zwShow = true">
					<image class="icon-6"
						src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-6.png"
						mode="widthFix"></image>
					<text class="u-font-28 u-m-l-10">筛选</text>
				</div>
			</div>
			<!-- 职位列表 -->
			<navigator :url="`/pages/recruit/job/zwdetail?job_id=${item.job_id}`" class="job-item"
				v-for="(item,index) in jobList" :key="index">
				<view class="title">{{item.title}}</view>
				<view class="u-flex label-wrap">
					<text v-for="(item2,index2) in item.tag" :key="index2">{{item2}}</text>
				</view>
				<view class="u-flex u-m-t-28">
					<image class="icon-7"
						src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-7.png"
						mode="widthFix"></image>
					<text class="u-font-24 u-content-color">{{ item.address }}</text>
				</view>
				<view class="salary">{{item.salary}}</view>
			</navigator>

		</template>
		<template v-else>
			<!-- 职位管理 简历管理 -->
			<div class="u-flex u-row-between u-p-20">
				<navigator url="/pages/recruit/worker/zwgl" class="title-item">
					<image class="icon-1"
						src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-1.png"
						mode="widthFix"></image>
					<div class="icon-wrap">
						<image class="icon-2"
							src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-4.png"
							mode="widthFix"></image>
					</div>
					<text class="u-font-30 blod u-m-l-40">职位管理</text>
				</navigator>
				<navigator url="/pages/recruit/worker/jlgl" class="title-item">
					<image class="icon-1"
						src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-1.png"
						mode="widthFix"></image>
					<div class="icon-wrap">
						<image class="icon-2"
							src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-5.png"
							mode="widthFix"></image>
					</div>
					<text class="u-font-30 blod u-m-l-40">简历管理</text>
				</navigator>
			</div>
			<!-- 推荐 附近... -->
			<div class="action-wrap u-flex">
				<text v-for="(item,index) in actionList" :key="index" :class="['text-1',{active:actionIndex==index}]"
					@click="handleAction(index)">
					{{item.name}}
				</text>
				<div class="u-flex-1"></div>
				<div class="u-flex u-row-right" @click="workerShow=true">
					<image class="icon-6"
						src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-6.png"
						mode="widthFix"></image>
					<text class="u-font-28 u-m-l-10">筛选</text>
				</div>

			</div>
			<!-- 招工列表 -->
			<navigator :url="`/pages/recruit/worker/ygdetail?resume_id=${item.resume_id}`" class="worker-item u-flex u-col-top"
				v-for="(item,index) in workerList" :key="index">
				<u-image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/my/avatar.png" width="100rpx"
					height="100rpx" shape="circle"></u-image>
				<div class="right u-m-l-20 u-flex-1">
					<div class="u-flex">
						<view class="title">{{item.name }}</view>
						<!-- <div class="text-bg">{{calculateAge(item.birthday)}}岁</div> -->
						<div class="text-bg">{{ handlerGender(item.gender) }}</div>
						<!-- <div class="address u-flex-1 u-text-right">{{item.address}}</div> -->
					</div>
					<div class="u-flex u-m-t-8">
						<div class="text-bg">{{calculateAge(item.birthday)}}岁</div>
						<view class="salary u-m-r-20">{{item.salary}}</view>
						<text class="label-item">{{item.education}}</text>
						
					</div>
					<div class="u-flex u-border-top u-m-t-25 u-p-t-20">
						<div class="text-bg">期望</div>
						<text class="u-font-24 u-content-color u-m-l-20">{{item.hope}}</text>
					</div>
				</div>
			</navigator>

		</template>
		<!-- 职位筛选弹窗 -->
		<u-popup v-model="zwShow" mode="bottom" border-radius="40" height="950" closeable="true">
			<view class="popup-wrap">
				<view class="u-font-34 blod">工作区域</view>
				<div class="item-wrap">
					<text :class="{active:areaCur==index}" @click="areaCurHandler(index)"
						v-for="(item,index) in areaList">{{item.name}}</text>
				</div>
				<view class="u-font-34 blod u-m-t-50">薪资</view>
				<div class="item-wrap">
					<text :class="{active:salaryCur==index}" @click="salaryCurHandler(index)"
						v-for="(item,index) in salaryList">{{item.name}}</text>
				</div>
				<view class="u-font-34 blod u-m-t-50">学历</view>
				<div class="item-wrap">
					<text :class="{active:eduCur==index}" @click="eduCurHandler(index)"
						v-for="(item,index) in eduList">{{item.name}}</text>
				</div>
				<!-- <view class="u-font-34 blod u-m-t-50">公司规模</view>
				<div class="item-wrap">
					<text :class="{active:scaleCur==index}" @click="scaleCurHandler(index)"
						v-for="(item,index) in scaleList">{{item.name}}人</text>
				</div> -->
				<div class="u-flex u-row-between u-m-t-72">
					<div class="btn btn-green" @click="confirm_zw">确认</div>
					<div class="btn btn-gray u-m-l-20" @click="reset_zw">重置</div>
				</div>
			</view>
		</u-popup>
		<!-- 工人筛选弹窗 -->
		<u-popup v-model="workerShow" mode="bottom" border-radius="40" height="1020" closeable="true">
			<view class="popup-wrap">
				<view class="u-font-34 blod">薪资</view>
				<div class="item-wrap">
					<text :class="{active:salaryCur==index}" @click="salaryCurHandler(index)"
						v-for="(item,index) in salaryList">{{item.name}}</text>
				</div>
				<view class="u-font-34 blod u-m-t-50">学历</view>
				<div class="item-wrap">
					<text :class="{active:eduCur==index}" @click="eduCurHandler(index)"
						v-for="(item,index) in eduList">{{item.name}}</text>
				</div>
				<view class="u-font-34 blod u-m-t-50">福利待遇(多选)</view>
				<div class="item-wrap">
					<text :class="{active:isSelected(item.name)}" @click="welfareCurHandler(index)"
						v-for="(item,index) in welfareList">{{item.name}}</text>
				</div>
				<view class="u-font-34 blod u-m-t-50">作休(单选)</view>
				<div class="item-wrap">
					<text :class="{active:holidayCur==index}" @click="holidayCurHandler(index)"
						v-for="(item,index) in holidayList">{{item.name}}</text>
				</div>
				<div class="u-flex u-row-between u-m-t-72">
					<div class="btn btn-green" @click="confirm_worker">确认</div>
					<div class="btn btn-gray u-m-l-20" @click="reset_worker">重置</div>
				</div>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import customHeader from '@/components/customHeader.vue'
	import customHeaderMixin from '@/mixins/customHeaderMixin.js'
	export default {
		components: {
			customHeader
		},
		mixins: [customHeaderMixin],
		data() {
			return {
				workerShow: false,
				zwShow: false,
				isCertified: false,
				areaCur: 0,
				areaList: [

				],
				salaryCur: 0,
				salaryList: [

				],
				eduCur: 0,
				eduList: [

				],
				scaleCur: 0, //公司规模
				scaleList: [

				],
				holidayCur: 0,
				holidayList: [{
						name: '不限'
					},
					{
						name: '白班'
					},
					{
						name: '夜班'
					}
				],
				welfareCur: 0,
				welfareList: [{
						name: '不限'
					},
					{
						name: '五险一金'
					},
					{
						name: '包住'
					},
					{
						name: '包吃'
					},
					{
						name: '加班补助'
					},
					{
						name: '年底双薪'
					},
					{
						name: '周末双休'
					},
					{
						name: '交通补助'
					}
				],

				banner: [
					
				],
				list: [{
					name: '我想找工作'
				}, {
					name: '我想招工人'
				}],
				current: 0,
				actionIndex: -1,
				actionList: [
					{
					name: '推荐'
				},
				// {
				// 	name: '附近'
				// }, 
				{
					name: '最新'
				}],
				jobList: [

				],
				workerList: [
					
				],

				avatar_src: '',
				nickname: '',
				paramData:{
					type:'',
					area:'',
					salary:'',
					education:''
				},
				schedule:'',
				tag:[],
			}
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...'
			});
			// 数据初始化
			this.dataInit()
		},
		onPullDownRefresh(){
			uni.showLoading({
				title: '加载中...'
			});
			// 数据初始化
			this.dataInit()
		},
		methods: {
			// 数据初始化
			dataInit(){
				// 获取用户已有头像和昵称
				this.getUserInfo();
				
				// 工作区域
				this.get_recruit_jobArea();
				
				// 薪资范围
				this.get_recruit_jobSalary();
				
				// 学历列表
				this.get_recruit_education();
				
				// 公司规模列表
				this.get_recruit_scale();
				
				// 简历列表
				this.get_recruit_resumeList();
				
				// 岗位列表
				this.get_recruit_recruitList();
				
				// 轮播图
				this.get_recruit_banners();
			},
			
			change(index) {
				this.current = index;
				this.actionIndex = -1
			},
			handleAction(index) {
				this.actionIndex = index;
				if(this.current == 0){
					// 岗位列表
					this.get_recruit_recruitList(this.actionIndex + 1)
				}else if(this.current == 1){
					// 简历列表
					this.get_recruit_resumeList(this.actionIndex + 1)
				}
			},

			// 获取用户已有头像和昵称
			getUserInfo() {
				this.$http({
					url: this.api.user_info,
					method: 'get',
				}).then(res => {
					// console.log(res,'获取用户信息');
					if (res.code == 1) {
						this.avatar_src = res.data.avatar;
						this.nickname = res.data.nickname;
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				})
			},

			// 工作区域
			get_recruit_jobArea() {
				this.$http({
					url: this.api.recruit_jobArea,
					method: 'GET'
				}).then(res => {
					if(res.code == 1){
						this.areaList = res.data.map(e => {
							return {
								name: e
							}
						})
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
					
				})
			},

			// 薪资范围
			get_recruit_jobSalary() {
				this.$http({
					url: this.api.recruit_jobSalary,
					method: 'GET'
				}).then(res => {
					if (res.code == 1) {
						this.salaryList = res.data.map(e => {
							return {
								name: e
							}
						})
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				})
			},

			// 学历列表
			get_recruit_education() {
				this.$http({
					url: this.api.recruit_education,
					method: 'GET'
				}).then(res => {
					if (res.code == 1) {
						this.eduList = res.data.map(e => {
							return {
								name: e
							}
						})
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				})
			},

			// 公司规模列表
			get_recruit_scale() {
				this.$http({
					url: this.api.recruit_scale,
					method: 'GET'
				}).then(res => {
					if (res.code == 1) {
						this.scaleList = res.data.map(e => {
							return {
								name: e
							}
						})
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				})
			},

			// 简历列表
			get_recruit_resumeList(type) {
				this.$http({
					url: this.api.recruit_resumeList,
					method: 'GET',
					data:{
						type
					}
				}).then(res => {
					if (res.code == 1) {
						this.workerList = res.data.list
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				})
			},

			// 判断性别函数
			handlerGender(num) {
				if (num == 0) {
					return '未知'
				} else if (num == 1) {
					return '男'
				} else {
					return '女'
				}
			},

			// 生日转年龄函数
			calculateAge(birthDate) {
				const birth = new Date(birthDate);
				const current = new Date();
				let age = current.getFullYear() - birth.getFullYear();
				const monthDifference = current.getMonth() - birth.getMonth();
				if (monthDifference < 0 || (monthDifference === 0 && current.getDate() < birth.getDate())) {
					age--;
				}
				return age;
			},

			// 岗位列表
			get_recruit_recruitList(type) {
				this.$http({
					url: this.api.recruit_recruitList,
					method: 'GET',
					data:{
						type
					}
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						this.jobList = res.data.list
						if (res.data.list.length == 0) {
							uni.showToast({
								icon: 'error',
								title: '暂无岗位!',
								duration: 2000
							})
						}
					}
				})
			},
			
			// 轮播图
			get_recruit_banners(){
				this.$http({
					url:this.api.recruit_banners,
					method:'GET'
				}).then(res=>{
					if(res.code == 1){
						uni.hideLoading();
						uni.stopPullDownRefresh();
						this.banner = res.data
					}
				})
			},
			
			// 职位筛选确认
			confirm_zw(){
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url:this.api.recruit_recruitList,
					method:'GET',
					data:{
						type:this.actionIndex,
						area:this.paramData.area,
						salary: this.paramData.salary,
						education: this.paramData.education
					}
				}).then(res=>{
					if(res.code == 1){
						uni.hideLoading();
						this.jobList = res.data.list;
						this.zwShow = false
					}
				})
			},
			
			// 职位筛选重置
			reset_zw(){
				this.paramData.area = '';
				this.paramData.salary = '';
				this.paramData.education = '';
				this.areaCur = 0;
				this.salaryCur = 0;
				this.eduCur = 0;
			},
			
			// 职位筛选弹窗
			areaCurHandler(index){
				this.areaCur=index;
				this.paramData.area = this.areaList[index].name
			},
			salaryCurHandler(index){
				this.salaryCur=index;
				this.paramData.salary = this.salaryList[index].name
			},
			eduCurHandler(index){
				this.eduCur=index;
				this.paramData.education = this.eduList[index].name
			},
			holidayCurHandler(index){
				this.holidayCur=index;
				if(this.holidayList[index].name == '不限'){
					this.schedule = 0
				}else if(this.holidayList[index].name == '白班'){
					this.schedule = 1
				}else if(this.holidayList[index].name == '夜班'){
					this.schedule = 2
				}
			},
			welfareCurHandler(index){
				this.welfareCur=index;
				let item = this.welfareList[index]
				let itemIndex = this.tag.findIndex(i=>{
					return i.name == item.name
				})
				if(itemIndex == -1){
					this.tag.push(item)
				}else{
					this.tag.splice(itemIndex,1)
				}
				this.isSelected(item.name)
			},
			isSelected(name){
				let item = this.tag.find(i=>{
					return i.name == name
				})
				return item ? true : false
			},
			
			// 工人筛选弹窗确认
			confirm_worker(){
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url:this.api.recruit_resumeList,
					method:'GET',
					data:{
						type:this.actionIndex,
						salary: this.paramData.salary,
						education: this.paramData.education,
						schedule:this.schedule,
						tag:this.tag
					}
				}).then(res=>{
					if(res.code == 1){
						uni.hideLoading();
						this.workerList = res.data.list;
						this.workerShow = false
					}
				})
			},
			
			// 工人筛选弹窗重置
			reset_worker(){
				this.paramData.salary = '';
				this.paramData.education = '';
				this.schedule = '';
				this.tag = [];
				this.salaryCur = 0;
				this.eduCur = 0;
				this.holidayCur = 0;
			}
		}
	}
</script>

<style scoped lang="scss">
	.btn {
		width: 330rpx;
		height: 100rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.btn-gray {
		background: #F3F3F3;
		border: 1px solid #DDDDDD;
		color: #999999;
	}

	.btn-green {
		background: #07C160;
		color: #FFFFFF;
	}

	.page-top {
		position: relative;
		width: 750rpx;

		.img-bg {
			width: 100%;
			height: 600rpx;
			position: absolute;
			z-index: 0;
			left: 0;
			top: 0;
		}

		.content-wrap {
			position: relative;
			z-index: 2;
			left: 0;
			top: 0;
			padding: 30rpx;

			.rz-btn {
				width: 145rpx;
				height: 44rpx;
				background: rgba(0, 0, 0, 0.15);
				border-radius: 22rpx;
			}

			.banner-tab-wrap {
				width: 710rpx;
				background: rgba(255, 255, 255, 0.75);
				border-radius: 15rpx;
				margin: 0 auto;
				margin-top: 40rpx;
				padding: 20rpx;
				padding-bottom: 0rpx;

				.img-bg {}

				image {
					width: 670rpx;
					height: 340rpx;
				}
			}
		}

	}

	.icon-8 {
		width: 26rpx;
		height: 26rpx;
		margin-right: 8rpx;
	}

	.company-btn {
		width: 204rpx;
		height: 70rpx;
		background: #FFFFFF;
		border-radius: 35rpx;
	}

	.title-item {
		width: 315rpx;
		height: 121rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		padding: 15rpx;
		display: flex;
		align-items: center;
		position: relative;

		.icon-1 {
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			left: 0;
			top: 0;
		}

		.icon-2 {
			width: 44rpx;
			height: 44rpx;
		}

		.icon-wrap {
			width: 120rpx;
			height: 90rpx;
			background: linear-gradient(-35deg, #E0FFEF 0%, #EFFFF7 100%);
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

	}

	.action-wrap {
		width: 710rpx;
		margin: 10rpx auto 20rpx auto;
		border-radius: 10rpx;
		background: #FFFFFF;
		padding: 20rpx;

		.text-1 {
			padding: 15rpx 24rpx;
			background: #F3F3F3;
			border-radius: 5rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #999999;
			margin-right: 20rpx;
		}

		.active {
			background: #EFFBF5;
			color: #07C160;
		}

		.icon-6 {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.job-item {
		width: 710rpx;
		margin: 20rpx auto;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx;
		position: relative;
		box-sizing: border-box;

		.title {
			font-size: 34rpx;
			margin-bottom: 20rpx;
			font-weight: 700;
		}

		.icon-7 {
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}

		.salary {
			position: absolute;
			top: 32rpx;
			right: 30rpx;
			color: #F7661E;
			font-size: 38rpx;
		}

		.label-wrap {
			text {
				border: 1px solid #DDDDDD;
				border-radius: 5rpx;
				padding: 10rpx;
				font-size: 20rpx;
				color: #999999;
				margin-right: 10rpx;
			}
		}
	}

	.worker-item {
		width: 710rpx;
		margin: 20rpx auto;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx;
		position: relative;
		box-sizing: border-box;

		.title {
			font-size: 34rpx;
			font-weight: 700;
		}

		.text-bg {
			background: #F3F3F3;
			border-radius: 17rpx;
			padding: 8rpx 12rpx;
			font-size: 20rpx;
			color: #999999;
			margin-left: 6rpx;
		}

		.icon-7 {
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}

		.salary {

			color: #F7661E;
			font-size: 24rpx;
		}

		.label-item {
			border: 1px solid #DDDDDD;
			border-radius: 5rpx;
			padding: 8rpx 10rpx;
			font-size: 20rpx;
			color: #999999;
			margin-right: 10rpx;
		}
	}

	// 筛选
	.popup-wrap {
		padding: 30rpx;

		.item-wrap {
			margin-top: 30rpx;
			display: grid;
			grid-template-columns: repeat(auto-fill, 150rpx);
			gap: 30rpx;

			text {
				width: 150rpx;
				height: 66rpx;
				background: #F3F3F3;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #999999;
			}

			text.active {
				background: #E6F8EE;
				color: #07C160;
			}
		}
	}
</style>
<style>
	page {
		padding: 0;
		padding-bottom: 30rpx;
	}
</style>